<template>
  <!-- 底部导航组件 -->
  <div class="footerText">
    <div class="footerTop">
      <!-- 与之对应的插槽 -->
      <div>
        <p>
          <slot name="home"></slot>
        </p>
        <p>
          <slot name="books"></slot>
        </p>
      </div>
      <div>
        <p>
          <slot name="more"></slot>
        </p>
        <p>
          <slot name="oldWeb"></slot>
        </p>
      </div>
		</div>
    <hr color="#FFF"/>
		<div class="footerBottom">
			<p>联系我们：</p>
			<p>QQ:3588681484</p>
			<p>Email:3588681484@qq.com</p>
		</div>
    <!-- 备案域名信息 -->
		<div class="police" style="">
		    <div class=""><a href="https://beian.miit.gov.cn" target="_blank">IPC证：蜀ICP备19038726号-1</a></div>
		 		<a target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51082102000182"
            style="display:inline-block;text-decoration:none;height:20px;line-height:20px; margin-top: 1em;">
            <img src="https://www.zengpengxi.com/images/police.png" style="float:left;"/>
            <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px;">
              川公网安备 51082102000182号
            </p>
        </a>
		</div>
  </div>
</template>

<script>
  export default {
    name: 'FooterText',
    data () {
      return {

      }
    }
  }

</script>

<style scpeed>
  .footerText {
    width: 100%;
    background-color: rgb(52, 58, 64);
    font-size: 1em;
    color: #FFF;
  }
  .footerText a {
    color: #FFF;
  }

  .footerTop {
    display: flex;
    justify-content: start;
  }

  .footerTop p {
    margin:0 2em;
  }

  .footerBottom {
    display: flex;
    justify-content: space-around;
    margin-left: 2em;
  }

  .IPC {
    margin-left: 8em;
  }

  .police {
    width: 300px;
    margin: 0 auto; 
    padding: 20px 0;
    text-align: center;
  }

  @media (max-width: 575px) {
    .footerBottom {
      display: block;
    }
  }

  @media (min-width: 576px) and (max-width: 767px) {

  }

  @media (min-width: 768px) and (max-width: 991px) {
    
  }

  @media (min-width: 992px) and (max-width: 1199px) {
    
  }

  @media (min-width: 1200px) {
    
  }
</style>